<template>
  <div id="app">
    <button @click="show = !show">开关</button>
    <transition>
      <div id="animated" v-if="show"></div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "Animation",
  data: () => ({
    show: true,
  }),
};
</script>
<style lang="less">
#animated {
  width: 100px;
  height: 100px;
  background-color: red;
}
.v-enter-active{
  animation: fade 4s;
}
.v-leave-active{
  animation: fade 4s reverse;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
